

<!--YuCodeGen Start Here-->

<div class="p-5">
    <h4 class="mb-4">Create a Student</h4>

    <form [formGroup]="form">
    <div class="form-group row">
        <label for="Name" class="col-sm-3 col-form-label">Name:</label>
        <div class="col-sm-9">
                <input type="text" formControlName="Name" required maxlength="20"  id="Name" />
            <div *ngIf="Name.invalid && (Name.dirty || Name.touched)" class="alert alert-danger">
                    <div *ngIf="Name.errors.required">Name is required.</div>
                    <div *ngIf="Name.errors.minlength">Name must be at least 20 characters long.</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Phone" class="col-sm-3 col-form-label">Phone:</label>
        <div class="col-sm-9">
                <input type="tel" formControlName="Phone"    id="Phone" />
            <div *ngIf="Phone.invalid && (Phone.dirty || Phone.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Email" class="col-sm-3 col-form-label">Email:</label>
        <div class="col-sm-9">
                <input type="email" formControlName="Email" required   id="Email" />
            <div *ngIf="Email.invalid && (Email.dirty || Email.touched)" class="alert alert-danger">
                    <div *ngIf="Email.errors.required">Email is required.</div>
                    <div *ngIf="Email.errors.email">Email must be a email address.</div>
            </div>
        </div>
    </div>
    <div class="form-group row">
        <label for="Password" class="col-sm-3 col-form-label">Password:</label>
        <div class="col-sm-9">
                <input type="password" formControlName="Password"    id="Password" />
            <div *ngIf="Password.invalid && (Password.dirty || Password.touched)" class="alert alert-danger">
            </div>
        </div>
    </div>
    </form>
    <div>
                <button (click)="createClick()" [disabled]="!form.valid" mat-raised-button color="primary" class="m-1"><mat-icon>create</mat-icon> Create</button>
                <button (click)="cancelClick()" mat-raised-button class="m-1"><mat-icon>cancel</mat-icon>Cancel</button>
    </div>
    

</div>

<!-- <p>
    {{form.value|json}}
</p>
<p>
    {{form.status}}
</p> -->
<!--YuCodeGen End Here-->
